<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详细页</title>
  @include('common/static')
</head>
<body>
  @include('common/header')
  <div class="main">
    <div class="main-crumb">
      <div class="container">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb">
          {!! Breadcrumbs::render('detail', $content) !!}
        </nav>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <!-- 内容区域 -->
          <article class="main-article">
            <header>
              <h1>{{ $content->title }}</h1>
              <div>发表于：{{ date('Y-m-d', strtotime($content->created_at)) }}</div>
            </header>
            <div class="main-article-content">
              <p>
                <img class="img-fluid" src="/static/upload/{{ $content->image }}" alt="">
              </p>
              <p>{!! $content->content !!}</p>
            </div>
            <!-- 点赞模块 -->
            <div class="main-article-like">
              <span>
                <i class="fa fa-thumbs-up" aria-hidden="true">{{ $count }}</i>
              </span>
            </div>
          </article>
          <div class="main-comment">
            <!-- 评论列表 -->
            @if (!$comments->isEmpty())
              <div class="main-comment-header">
                <span id="count">{{ $comments->count() }}</span> 条评论
              </div>
              @foreach ($comments as $val)
              <div class="main-comment-item">
                <div class="main-comment-name">
                  {{ $val->user->name }}
                </div>
                <div class="main-comment-date">
                  {{ date('Y-m-d', strtotime($val->created_at)) }}
                </div>
                <div class="main-comment-content">
                  {{$val->content}}
                </div>
              </div>
              @endforeach
            @endif
          </div>
          <!-- 发表评论表单 -->
          <div class="main-reply">
            @if (session()->has('users'))
            <div class="main-reply-header">发表评论</div>
            <div class="main-reply-title">评论内容</div>
            <div>
              <textarea rows="8" id="content"></textarea>
            </div>
            <div>
              <input type="button" id="publish" value="提交评论">
            </div>
            @endif
          </div>
        </div>
        <div class="col-md-3">
          <!-- 侧边栏 -->
          @include('common/sidebar')
        </div>
      </div>
    </div>
  </div>
  @include('common/footer')
  <script>
    $('.fa-thumbs-up').on('click', function () {
      if (!{{ session()->has('users') ? 'true' : 'false' }}) {
        alert('您必须先登录！');
        return;
      }
      $.post('{{ url('like') }}', { id: {{ $id }}, _token: '{{ csrf_token() }}' }, function (result) {
        if (result) {
          if (result.status == 1) {
            $('.fa-thumbs-up').html(result.count);
            return;
          }
          alert(result.msg);
          return;
        }
        alert('点赞失败');
      });
    });
    $('#publish').on('click', function () {
      var data = {
        cid: {{ $id }},
        content: $('#content').val(),
        _token: '{{ csrf_token() }}'
      };
      $.post('{{ url('comment') }}', data, function (result) {
        if (!result) {
          alert('发表评论失败！');
          return;
        }
        if (result.status != 1) {
          alert(result.msg);
          return;
        }
        var data = result.data;
        var user = data.user;
        var html = '<div class="main-comment-item">';
        html += '<div class="main-comment-name">' + user + '</div>';
        html += '<div class="main-comment-date">' + data['created_at'] + '</div>';
        html += '<div class="main-comment-comment">' + data['content'] + '</div>';
        html += '</div>';
        $('.main-comment').append(html);
        $('#count').html(date['count']);
      });
    })
  </script>
</body>
</html>